<template>
  <el-dialog :visible.sync="isShow" width="70%" :show-close='false' class="qcSampleDialog" :closeOnClickModal='false'>
    <span slot="title" class="dialog-title">

		  	 {{bjorck=='edit'?'设置标准样品':'标准样品'}}
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
    <div class="penalContent">
      <div class="penalrow selectw100">
        <div class=" width100 ">
          <div class="inlineblock verticalmiddle">
            名称
          </div>
          <div class="inlineblock verticalmiddle informationItem">
            <el-input size="mini" v-model="commonData.materialName" disabled></el-input>
          </div>
        </div>
      </div>
      <div class="penalrow selectw100">
        <div class=" width100 ">
          <div class="inlineblock verticalmiddle">
            批号
          </div>
          <div class="inlineblock verticalmiddle informationItem">
            <el-input size="mini" v-model="commonData.batch" disabled></el-input>
          </div>
        </div>
      </div>

      <div class="penalrow selectw100">
        标样详情
        <el-button v-if="bjorck=='edit'" style="position:absolute;right:20px;top:0;" type="primary" size="mini" @click="addOne">添加</el-button>
      </div>
      <div style="height:calc(100% - 136px);padding:0 20px;">
        <el-table :data="zhibiaoTable" style="width: 100%;height:100%;" class="tableCon" size="mini">
          <el-table-column label="序号" min-width="50px" fixed>
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>

          <el-table-column property="itemCode" label="检测项目" fixed min-width="120px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.itemCode" filterable placeholder="选择检测项目" size="mini" style="width:100%;" :disabled="bjorck=='look'">
                <el-option v-for="item in projectData" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <!-- <el-table-column property="detectability" label="能力参数" fixed min-width="180px">
            <template slot-scope="scope">
               <el-select v-model="scope.row.detectabilityName" filterable placeholder="选择能力参数" v-if = "bjorck !='look'"  size="mini" style="width:100%;" value-key = "detectability" :disabled="bjorck=='look'"  @focus="getDetecAndUnit(scope.row.itemCode,scope.row)" @change = "(val) => getUnit(val,scope.row)">
               <el-option v-for="item in scope.row.detectList" :key="item.detectability" :label="item.detectabilityName" :value="item">
                </el-option>
              </el-select>
              <el-select v-model="scope.row.detectabilityName" filterable placeholder="选择能力参数" v-if = "bjorck =='look'" :title = "scope.row.detectabilityName" size="mini" style="width:100%;" value-key = "detectability" :disabled="bjorck=='look'"  @focus="getDetecAndUnit(scope.row.itemCode,scope.row)" @change = "(val) => getUnit(val,scope.row)">

                <el-option v-for="item in scope.row.detectList" :key="item.detectability" :label="item.detectabilityName" :value="item">
                </el-option>
              </el-select>
            </template>
          </el-table-column> -->
          <el-table-column property="unit" label="单位" min-width="80px">
           <template slot-scope="scope">
              <el-select v-model="scope.row.unit" filterable placeholder="选择单位" v-if = "bjorck !='look'"  size="mini" style="width:100%;" :disabled="bjorck == 'look'">
              <el-option v-for="item in unitList" :key="item.code" :label="item.ename" :value="item.code">
               </el-option>
             </el-select>
             <el-select v-model="scope.row.unit" filterable placeholder="选择单位" v-if = "bjorck =='look'" :title = "scope.row.detectabilityName" size="mini" style="width:100%;"
            :disabled="bjorck == 'look'"  >

               <el-option v-for="item in unitList" :key="item.code" :label="item.ename" :value="item.code">
               </el-option>
             </el-select>
           </template>
          </el-table-column>
         <!-- <el-table-column property="unitName" label="单位" min-width="80px">
          </el-table-column> -->
          <el-table-column property="nogndu" label="浓度" min-width="100px">
            <template slot-scope="scope">
              <el-input :disabled="bjorck=='look'" v-model="scope.row.concentration" size="mini" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column property="dixian" label="低限" min-width="80px">
            <template slot-scope="scope">
              <el-input :disabled="bjorck=='look'"  oninput="this.value=this.value.replace(/[^0-9.]+/,'');" v-model="scope.row.lowLimit"
                size="mini" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column property="gaoxian" label="高限" min-width="80px">
            <template slot-scope="scope">
              <el-input :disabled="bjorck=='look'"  v-model="scope.row.highLimit" oninput="this.value=this.value.replace(/[^0-9.]+/,'');"
                size="mini" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="100px" v-if = "bjorck !='look'">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="deleteOne(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
    <span slot="footer" class="dialog-footer">
			<el-button v-if="bjorck=='edit'" class="penalButton" type="primary" size="mini" v-on:click="sumbmit">保存</el-button>
        <el-button class="penalButton" size="mini" v-on:click="close">取消</el-button>
		</span>
  </el-dialog>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    data() {
      return {
        isShow: true,
        yesornoValue: '1',
        enableStatusValue: '1',
        projectData: [],
        isAdd: true,
        commonData: {
          "materialCode": "WZ2019012400001",
          "materialName": "没有",
          "hashcode": "140060589",
          "batch": "BCK20ML0001",
          "spce": "200ml/瓶",
        },
        zhibiaoTable: [],
        analysisItemTableDateValue: '',
        detectList:[],
        unitList:[],
      }
    },
    computed: {
      ...mapState(['enableStatus', 'tableHeightA', 'yesorno', 'enableStatus', 'analysisItemTableDate', 'unitTableDate']),
    },
    props: ['bjorck', 'noshenhe', 'selectRow','samplesetObj'],
    created() {
      this.commonData.materialCode = this.selectRow.materialCode || this.selectRow.materialName.code
      this.commonData.materialName = this.selectRow.materialName || this.selectRow.materialName.name
      this.commonData.hashcode = this.selectRow.hashcode
      this.commonData.batch = this.selectRow.batch
      this.zhibiaoTable =JSON.parse(JSON.stringify(this.selectRow.itemStandardList))
      console.log(this.zhibiaoTable)
      this.readItemSet()
      this.readLabUnitList();
    },
    methods: {
      close() {
        this.zhibiaoTable = [];
        // this.selectRow.itemStandardList = [];
        this.$parent.qualitySampleAddShow = false;
      },
      addOne() {
        this.zhibiaoTable.push({
          itemCode: "",
          itemName: "",
          concentration: "",
          lowLimit: "",
          highLimit: "",
          detectability:"",
          unitName:"",
          unit:"",
          detectList:[],

          ...this.commonData
        })
      },
      deleteOne(index) {
        this.zhibiaoTable.splice(index, 1)
      },
      // 选中检测项目后，获取能力参数和单位列表
      getDetecAndUnit(val,row){
        row.detectability = "";
        row.detectabilityName = {};
        row.unit = "";
        row.unitName = "";

        this.$http({
          method: 'post',
          apiUrl: '/resource/getDetecAndItemUnitList.htm',
          params: {itemCode:val},
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            console.log(res.data)
            this.$set(row,'detectList',res.data)
              console.log(row)

          }
        })
      },
      getUnit(val,row){
        row.unit = row.detectabilityName.unit;
        row.unitName = row.detectabilityName.unitName;

      },
      readItemSet() {
        var params = null;
        this.$http({
          method: 'post',
          apiUrl: '/technology/readItemBeanList.htm',
          params: params,
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            this.projectData = res.data

          }
        }, )
      },
      readLabUnitList(val,row){
        this.$http({
          method: 'post',
          apiUrl: '/technology/readLabUnitList.htm',
        }).then(res => {
          if (res.code === 0) {
            this.unitList = res.data

          }
        })
      },
      sumbmit() {
        for(var i in this.zhibiaoTable){
          // 判断能力参数是否为空
          console.log(this.zhibiaoTable[i].detectabilityName )
          // if(this.zhibiaoTable[i].itemCode == "" || this.zhibiaoTable[i].detectabilityName == undefined || JSON.stringify(this.zhibiaoTable[i].detectabilityName) == '{}' ){
          //     this.$message({
          //       showClose: true,
          //       message: '检测项目和能力参数不能为空',
          //       type: 'info'
          //     });
          //     return;
          // }
          if(this.zhibiaoTable[i].itemCode == "" ){
              this.$message({
                showClose: true,
                message: '检测项目不能为空',
                type: 'info'
              });
              return;
          }
          if(this.zhibiaoTable[i].unit == "" ){
              this.$message({
                showClose: true,
                message: '单位不能为空',
                type: 'info'
              });
              return;
          }
          // 加检测项名称
          for(var j in this.projectData){
            if(this.projectData[j].code == this.zhibiaoTable[i].itemCode){
              this.zhibiaoTable[i].itemName = this.projectData[j].name;
            }
          }
          this.unitList.forEach((item) =>{
            if(item.code == this.zhibiaoTable[i].unit){
              this.zhibiaoTable[i].unitName = item.ename;
            }
          })
          // debugger;
          if(this.zhibiaoTable[i].lowLimit != '' && this.zhibiaoTable[i].highLimit != ''  && Number(this.zhibiaoTable[i].lowLimit) >= Number(this.zhibiaoTable[i].highLimit)){
            this.$message({
              showClose: true,
              message: '低限不能大于等于高限！',
              type: 'info'
            });
            return;
          }

          // if(this.zhibiaoTable[i].detectabilityName == undefined){
          //   this.zhibiaoTable[i].detectabilityName = ""
          // }

          // if(this.zhibiaoTable[i].detectabilityName.detectability != undefined){
          //    this.zhibiaoTable[i].detectability = this.zhibiaoTable[i].detectabilityName.detectability
          //    this.zhibiaoTable[i].detectabilityName = this.zhibiaoTable[i].detectabilityName.detectabilityName

          // }else{
          //   this.zhibiaoTable[i].detectability = this.zhibiaoTable[i].detectability
          //   this.zhibiaoTable[i].detectabilityName = this.zhibiaoTable[i].detectabilityName
          // }
          // if(JSON.stringify(this.zhibiaoTable[i].detectabilityName) == "{}"){
          //   this.zhibiaoTable[i].detectabilityName = '';
          // }
        }
        console.log(this.zhibiaoTable)
        this.selectRow.itemStandardList = this.zhibiaoTable;
        this.$message({
          showClose: true,
          message: '已添加标样！',
          type: 'success'
        })
        this.$parent.qualitySampleAddShow = false;

      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .qcSampleDialog .el-dialog {
    height: 70%
  }
</style>
